<template>
	<view class="contianer">
		<view class="mian_moeny">
			<text>账户余额 ： {{list.money}}</text>
			<view class="pay">
				充值
			</view>
		</view>
		<!-- 金额 -->
		<view class="payitem">
			<view class="itemp" v-for="(item,index) in list.rule" :key='index' :class="{con:setcon ==index}"
				@click="setcon =index">
				<text class="money"> {{item.price}}元</text>
				<text class="item_text"> 赠送{{item.discount_price}}元优惠券</text>
			</view>
		</view>

		<view class="paytext">
			<input type="number" placeholder="输入充值金额，无赠送" />
			<view class="paybtn" @click="gopath('payok/payok')">
				充值
			</view>
		</view>
		<text class="con_text" v-text="list.recharge_rules">
		</text>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				setcon: 0,
				list: {}
			}
		},
		onLoad() {
			this.getpay()
		},
		methods: {
			async getpay() {
				const res = await this.$api("/api/user/recharge", 'get').then((res) => {
					console.log(res);
					this.list = res.data.data
				})
			},
			gopath(i) {
				uni.navigateTo({
					url: `/pages/${i}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	view {
		box-sizing: border-box;
		font-family: PingFang SC, PingFang SC;
	}

	.contianer {
		background-color: #fff;
		padding: 20px 15px;

		.mian_moeny {
			height: 90px;
			background: #FB774B;
			box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.01);
			border-radius: 10px 10px 10px 10px;
			width: 100%;
			display: flex;
			padding: 0 15px;
			margin-bottom: 20px;
			justify-content: space-between;
			align-items: center;

			text {
				font-size: 16px;
				font-weight: bold;
				color: #FFFFFF
			}

			.pay {
				height: 30px;
				background: #FFFFFF;
				border-radius: 26px 26px 26px 26px;
				font-weight: bold;
				color: #FB774B;
				font-size: 15px;
				padding: 4px 15px;
			}
		}

		.payitem {
			width: 100%;
			display: flex;
			flex-wrap: wrap;

			.itemp {
				min-width: 45%;
				margin-bottom: 15px;
				height: 90px;
				background: #F5F5F5;
				box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.01);
				border-radius: 10px 10px 10px 10px;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-around;
				padding: 10px 0;

				.item_text {


					color: #999999;

					font-size: 14px;
				}

				.money {
					font-weight: bold;
					color: #FD845C;
					font-size: 16px;
				}

				&:nth-child(2n+1) {
					margin-right: 15px;

				}

				&.con {
					border: 2px solid #FB774B;
				}
			}
		}

		.paytext {
			height: 40px;
			background: #F5F5F5;
			border-radius: 5px 5px 5px 5px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 15px;
			color: #999999;
			font-size: 14px;
			margin-bottom: 20px;
			
			input{
				color: #999999;
				font-size: 14px;
			}

			.paybtn {
				height: 26px;
				background: #FB774B;
				border-radius: 26px 26px 26px 26px;
				padding: 4px 20px;
				color: #fff;
				font-weight: bold;
			}
		}

		.con_text {
			font-size: 13px;
			color: #999999;
			line-height: 25px;
		}

	}
</style>